<template>
  <a-card :bordered="false" size="small">
    <a-form layout="inline" @submit.prevent="onSubmit" :form="form" class="search-list flex">
      <a-form-item class="item" label="优惠卷名称">
        <a-input
          style="min-width:200px"
          v-decorator="['name',{rules: [{pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{0,10}$/gi  , message:'最大10个字符,不可输入特殊符号'}],initialValue:initialData.name || ''}]"
          placeholder="请输入"
        ></a-input>
      </a-form-item>
      <a-form-item class="item" label="优惠卷金额">
        <a-select
          style="min-width:100px"
          v-decorator="['amount',{initialValue:initialData.amount || ''}]"
          placeholder="请选择"
        >
          <a-select-option v-for="(item,i) in boeText" :key="i">{{item}}</a-select-option>
        </a-select>
      </a-form-item>
      <div class="action-box">
        <a-button htmlType="submit" type="primary">查询</a-button>
        <a-button @click="reset">重置</a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script>
export default {
  props: {
    payload: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    const { query } = this.$route;
    return {
      form: this.$form.createForm(this),
      initialData: query,
      boeText: {
        "": "全部状态",
        0: "关闭",
        1: "开启"
      }
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.form.validateFields((err, values) => {
        values.page = 1;
        this.$emit("change", values);
      });
    },
    reset() {
      const payload = {
        page: 1
      };
      Object.keys(this.payload).forEach(key => {
        if (!["page", "per_page"].includes(key)) {
          payload[key] = "";
        }
      });
      this.$emit("change", payload);
    }
  }
};
</script>

<style lang="less" scoped>
.search-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.item {
  margin: 10px;
  margin-left: 0;
}
</style>
